<template>
  <layout-view :tab-index="4" height-fill>
    <template #content>
      <div class="group">
        <el-tabs tab-position="left" style="min-height: 50vh">
          <el-tab-pane lazy label="用户信息"><vip-info/></el-tab-pane>
          <el-tab-pane lazy label="阅读记录"><book-card type="record"/></el-tab-pane>
          <el-tab-pane lazy label="我的收藏"><book-card type="like"/></el-tab-pane>
          <el-tab-pane lazy label="我的评论">
            <el-card header="我的评论">
              <comment-page type="vip"/>
            </el-card>
          </el-tab-pane>
          <el-tab-pane lazy label="意见反馈"><feedback-page/></el-tab-pane>
          <el-tab-pane lazy label="系统通知"><notice-page/></el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </layout-view>
</template>

<script>
import LayoutView from '@/components/LayoutView.vue'
import VipInfo from '@/components/usercenter/VipInfo.vue'
import BookCard from '@/components/usercenter/BookCard.vue'
import CommentPage from '@/components/CommentPage.vue'
import NoticePage from '@/components/usercenter/NoticePage.vue'
import FeedbackPage from '@/components/usercenter/FeedbackPage.vue'
export default {
  name: 'UserCenter',
  components: { LayoutView, VipInfo, BookCard, CommentPage, NoticePage, FeedbackPage },
  created () {
    this.$http.get('api/vip/info').then(data => {
      if (data) {
        this.isLogin = true
        this.loginId = data.vipId
      }
    }).catch((e) => {
      if (e.code === 401) {
        this.$message.error('请先登录！')
        this.$router.replace('/')
      }
    })
  }
}
</script>

<style scoped lang="scss">
.group {
  width: 980px;
  margin: 10px auto;
  background-color: whitesmoke;
}
</style>
